<%- contentFor('mainContent') %>

    <!-- Page content-->
    <div class="container mt-4">
      <div class="row mt-4 mb-3">
          <div class="d-flex justify-content-between align-items-center">
              <h4 class="mb-0">近期账单记录</h4>
              <a class="btn btn-primary btn-sm" href="/add">记账</a>
          </div>
      </div>
      <div class="table-responsive">
          <table class="table table-striped table-hover">
              <tbody>

                  <!-- start for -->
                  <% data.forEach(function(item) { %>
                      <tr class="position-relative">
                          <td colspan="5">
                              <div class="row g-2">
                                  <div class="col-5">
                                      <span class="badge <%= item.type === -1 ? 'bg-danger' : 'bg-success' %>">
                                          <%= item.type===-1 ? '支出' : '收入' %>
                                      </span>
                                      <span class="ms-2">
                                          <%= item.category %>
                                      </span>
                                  </div>
                                  <div class="col-4 text-end">
                                      <span class="<%= item.type === -1 ? 'text-danger' : 'text-success' %> fw-bold">
                                          <%= item.type===-1 ? '-' : '+' %>¥<%= item.amount.toFixed(2) %>
                                      </span>
                                  </div>
                                  <div class="col-3 text-end">
                                      <span class="me-2">
                                          <%= item.payType %>
                                      </span>
                                  </div>
                              </div>
                              <div class="row mt-1 text-muted small">
                                  <div class="col-8">
                                      <span>
                                          <%= item.remark || '' %>
                                      </span>
                                  </div>
                                  <div class="col-4 text-end">
                                      <%= new Date(item.date).toISOString().slice(0,10) %>
                                  </div>
                              </div>
                          </td>
                          <td class="align-middle">
                              <button class="btn btn-danger btn-sm delete-btn d-none" data-id="<%= item._id %>"
                                  style="position: absolute; right: 15px; top: 50%; transform: translateY(-50%);">
                                  删除
                              </button>
                          </td>
                      </tr>
                      <% }) %>
                          <!-- end-->
              </tbody>
          </table>
      </div>
  </div>


<%- contentFor('pageJS') %>
<!-- Core theme JS-->
<script>
  // 删除功能处理
  document.querySelectorAll('.delete-btn').forEach(btn => {
      btn.addEventListener('click', async (e) => {
          const id = e.target.dataset.id;
          try {
              const response = await fetch(`/api/account/${id}`, { method: 'DELETE' });
              if (response.ok) {
                  window.location.reload();
              } else {
                  alert('删除失败');
              }
          } catch (error) {
              console.error('删除请求失败:', error);
              alert('网络请求失败');
          }
      });
  });

</script>
